<template>
	<view class="add-car-page">
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>车辆封面</text>
				</view>
				<view class="uplaods">
					<view class="upload" @click="handChooseImg('coverPlan')">
						<image v-if="queryform.coverPlan" :src="queryform.coverPlan" mode="aspectFill">
						</image>
						<image v-else src="/static/icon/coverupload.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>车辆轮播图</text>
					<text class="tips">（最多6张）</text>
				</view>
				<view class="uplaods" @click="handChooseImg('slideshow')">
					<view class="upload" v-for="(item, index) in queryform.slideshow" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<view class="del" @click.stop="handDel(index, 'slideshow')">
							<uv-icon name="trash" color="orangered"></uv-icon>
						</view>
					</view>
					<view class="upload" v-if="queryform.slideshow.length < 6">
						<image src="/static/icon/coverupload.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>车辆名称</text>
				</view>
				<view class="zdy-input">
					<uv-textarea v-model="queryform.productName" border="none" bgColor="#fff"
						placeholder="请输入租车名称"></uv-textarea>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item select">
				<view class="label">
					<text>品牌</text>
				</view>
				<view class="select-val" @click="handChooseBrand">
					<text v-if="queryform.brand">{{ queryform.brand }}</text>
					<text v-else class="place">请选择</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item select">
				<view class="label">
					<text>车型</text>
				</view>
				<view class="select-val" @click="handModal">
					<text v-if="queryform.model">{{ queryform.model }}</text>
					<text v-else class="place">请选择</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item select">
				<view class="label">
					<text>库存</text>
				</view>
				<view class="input">
					<input v-model="queryform.stock" type="number" placeholder="请输入">
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item select">
				<view class="label">
					<text>是否上架</text>
				</view>
				<view class="input flex" style="justify-content: flex-end;">
					<uv-switch v-model="queryform.isShelves" activeColor="#FF9113"></uv-switch>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>车辆介绍</text>
				</view>
				<view class="zdy-input">
					<uv-textarea v-model="queryform.introduce" border="none" bgColor="#fff"
						placeholder="请输入车辆介绍"></uv-textarea>
				</view>
				<view class="uplaods" @click="handChooseImg('detailsImg')">
					<view class="upload" v-for="(item, index) in queryform.detailsImg" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<view class="del" @click.stop="handDel(index, 'detailsImg')">
							<uv-icon name="trash" color="orangered"></uv-icon>
						</view>
					</view>
					<view class="upload" v-if="queryform.detailsImg.length < 6">
						<image src="/static/icon/coverupload.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>商家保障</text>
				</view>
				<view class="zdy-input">
					<uv-textarea v-model="queryform.guarantee" border="none" bgColor="#fff"
						placeholder="请输入商家保障"></uv-textarea>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>商家附赠</text>
				</view>
				<view class="zdy-input">
					<uv-textarea v-model="queryform.bundled" border="none" bgColor="#fff"
						placeholder="请输入商家附议"></uv-textarea>
				</view>
			</view>
		</view>
		<!-- <view class="form">
			<view class="form-item select">
				<view class="label">
					<text>城市</text>
				</view>
				<view class="select-val" @click="handCity">
					<text v-if="queryform.city">{{ queryform.city }}</text>
					<text class="place" v-else>请选择</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view> -->
		<view class="form">
			<view class="form-item select">
				<view class="label">
					<text>车辆参数</text>
				</view>
				<view class="select-val" @click="handOpen()">
					<text class="to-setting">{{ isCan ? '去修改' : '去设置' }}</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="select">
					<view class="label">
						<text>租车方案</text>
					</view>
					<view class="select-val" @click="handFa()">
						<uv-icon name="plus-circle" color="#F57B01"></uv-icon>
						<text class="to-setting">去添加</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="fangans">
					<view class="fangan" v-for="(item, index) in queryform.schemes" :key="item.lease"
						@click="handFa(item, index)">
						<text>{{ item.lease }}期</text>
						<view class="icon" @click.stop="handFaDel(index)">
							<uv-icon name="close" size="22rpx" color="#fff"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>车辆亮点</text>
				</view>
				<view class="enum">
					<view class="cell">
						<view class="name">
							接单平台
						</view>
						<view class="more" @click="handChoosePlatform">
							<text v-if="queryform.platform.length > 0">
								去修改
							</text>
							<text v-else>请选择</text>
							<uv-icon name="arrow-right"></uv-icon>
						</view>
					</view>
					<view class="cell">
						<view class="name">
							优势
						</view>
						<view class="more" @click="handYs('advantage')">
							<text class="to-add">
								{{ queryform.strength.advantage ? '去修改' : '去填写' }}
							</text>
							<uv-icon name="arrow-right"></uv-icon>
						</view>
					</view>
					<view class="cell">
						<view class="name">
							合规
						</view>
						<view class="more" @click="handYs('compliance')">
							<text class="to-add">
								{{ queryform.strength.compliance ? '去修改' : '去填写' }}
							</text>
							<uv-icon name="arrow-right"></uv-icon>
						</view>
					</view>
					<view class="cell">
						<view class="name">
							上牌
						</view>
						<view class="more" @click="handYs('registration')">
							<text class="to-add">
								{{ queryform.strength.registration ? '去修改' : '去填写' }}
							</text>
							<uv-icon name="arrow-right"></uv-icon>
						</view>
					</view>
					<view class="cell">
						<view class="name">
							活动
						</view>
						<view class="more" @click="handYs('activity')">
							<text class="to-add">
								{{ queryform.strength.activity ? '去修改' : '去填写' }}
							</text>
							<uv-icon name="arrow-right"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="check">
			<view style="width: 50rpx;">
				<uv-checkbox-group v-model="checkboxValue" shape="circle">
					<uv-checkbox label="" name="ok"></uv-checkbox>
				</uv-checkbox-group>
			</view>

			<view style="flex: 1;" @click="handCheck">
				<text>已阅读并同意</text>
				<text @click.stop="handXy">《发布协议》</text>
			</view>

		</view>
		<view class="submit">
			<button class="cu-btn" @click="handSubmit">提交</button>
		</view>
		<FilterPop :isRequire="false" isOne ref="popRef" @change="filterChange" />
		<programme ref="faRef" @change="progreanmmeChange" />
		<choose-platform ref="platForm" @change="platFormChange" />
		<ys-pop ref="ysRef" @change="ysChange" />
		<uv-picker ref="pickerRef" :columns="columns" keyName="label" @confirm="moDelconfirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		toRaw,
		getCurrentInstance,
		inject
	} from 'vue'
	import uploadFile from '@/utils/ossutil/uploadFile.js'
	import FilterPop from '@/components/FilterPop.vue'
	import programme from './components/programme.vue'
	import choosePlatform from './components/choosePlatform.vue'
	import ysPop from './components/ysPop.vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		doModalList,
		doLabels
	} from '@/apis/system.js'
	import {
		doProvince
	} from '@/apis/user.js'
	import {
		doAdd,
		doDetail
	} from '@/apis/car.js'

	const $back = inject('$back')
	const {
		proxy
	} = getCurrentInstance();


	const queryform = ref({
		coverPlan: '',
		slideshow: [],
		productName: '',
		brand: '',
		model: '',
		stock: '',
		introduce: '',
		detailsImg: [],
		guarantee: '',
		bundled: '',
		isShelves: false,
		// province: '',
		// city: '',
		schemes: [],
		bedrockPrice: '',
		platform: [],
		strength: {
			advantage: '',
			compliance: '',
			activity: '',
			registration: ''
		}
	})

	let loading = false
	const handSubmit = async () => {
		if (checkboxValue.value.length === 0) {
			uni.$uv.toast('请先勾选发布协议')
			return
		}
		const params = uni.$uv.deepClone(queryform.value)
		// if (!isCan.value) {
		// 	uni.$uv.toast('请设置参数')
		// 	return
		// }
		if (!params.coverPlan) {
			uni.$uv.toast('请上传封面')
			return
		}
		if (params.slideshow.length === 0) {
			uni.$uv.toast('请至少上传一张车辆轮播图')
			return
		}
		if (!params.productName) {
			uni.$uv.toast('请输入租车名称')
			return
		}
		if (!params.brand) {
			uni.$uv.toast('请选择品牌')
			return
		}
		if (!params.model) {
			uni.$uv.toast('请选择型号')
			return
		}
		if (!params.stock) {
			uni.$uv.toast('请输入库存')
			return
		}
		// if (!params.guarantee) {
		// 	uni.$uv.toast('请输入商家保障')
		// 	return
		// }
		// if (!params.bundled) {
		// 	uni.$uv.toast('请输入商家附议')
		// 	return
		// }
		// if (!params.city) {
		// 	uni.$uv.toast('请选择城市')
		// 	return
		// }
		if (params.schemes.length === 0) {
			uni.$uv.toast('请添加租车方案')
			return
		}
		params.strength = JSON.stringify(params.strength)
		params.platform = JSON.stringify(params.platform)
		params.bedrockPrice = Math.min.apply(Math, uni.$uv.deepClone(params.schemes).map(function(o) {
			return o.rent;
		}))
		if (loading) return
		loading = true
		try {
			await doAdd(params)
			uni.$uv.toast(params?.id ? '修改成功' : '发布成功')
			setTimeout(() => {
				const eventChannel = proxy.getOpenerEventChannel()
				params.status = 'AUDIT'
				eventChannel.emit('success', params);
				$back()
			}, 500)
		} catch (e) {
			loading = false
		}
	}
	/**
	 * 	车辆参数
	 * */
	const isCan = ref(false)
	const popRef = ref(null)
	const handOpen = () => {
		popRef.value.handOpen(uni.$uv.deepClone(queryform.value))
	}
	const filterChange = (e) => {
		isCan.value = true
		queryform.value = {
			...queryform.value,
			...e
		}
	}
	/**
	 * 	租车方案
	 * */
	const faRef = ref(null)
	let oldIndex = -1
	const handFa = (row, index) => {
		if (row) {
			oldIndex = index
			faRef.value.handOpen(row)
		} else {
			oldIndex = -1
			faRef.value.handOpen()
		}
	}
	const progreanmmeChange = (e) => {
		if (oldIndex === -1) {
			queryform.value.schemes.push(e)
		} else {
			queryform.value.schemes[oldIndex] = e
		}
	}
	const handFaDel = (e) => {
		queryform.value.schemes.splice(e, 1)
	}
	/**
	 * 	接单平台
	 * */
	const platForm = ref()
	const handChoosePlatform = () => {
		platForm.value.handOpen(uni.$uv.deepClone(queryform.value.platform))
	}
	const platFormChange = (e) => {
		queryform.value.platform = e
	}

	/**
	 * 	亮点
	 * */
	const ysRef = ref(null)
	let oldKey = ''
	const handYs = (key) => {
		oldKey = key
		ysRef.value.handOpen(toRaw(queryform.value).strength[key])
	}
	const ysChange = (e) => {
		queryform.value.strength[oldKey] = e
	}

	/**
	 * 	品牌车型
	 * */
	const pickerRef = ref()
	const columns = ref([])
	const handChooseBrand = () => {
		uni.navigateTo({
			url: '/pagesA/dealers/brand',
			events: {
				someEvent: async (e) => {
					queryform.value.brand = e.name
					queryform.value.model = ''
					const data = await doModalList(e.id)
					columns.value = [data.map(el => {
						return {
							label: el.name,
							id: el.id,
						}
					})]
				}
			}
		})
	}
	const handModal = () => {
		if (!queryform.value.brand) {
			uni.$uv.toast('请先选择品牌')
			return
		}
		pickerRef.value.open()
	}
	const moDelconfirm = (e) => {
		queryform.value.model = e.value[0].label
	}

	/**
	 * 	城市
	 * */
	// const handCity = () => {
	// 	uni.navigateTo({
	// 		url: '/pagesA/other/city?type=1',
	// 		events: {
	// 			someEvent: async (e) => {
	// 				const data = await doProvince(e.provinceCode)
	// 				queryform.value.province = data.fullname
	// 				queryform.value.city = e.fullname
	// 			}
	// 		}
	// 	})
	// }

	/**
	 * 	图片相关
	 * */
	const handChooseImg = (name) => {
		uni.chooseImage({
			count: name === 'coverPlan' ? 1 : 6 - queryform.value[name].length,
			success: (res) => {
				if (name === 'coverPlan') {
					uploadFile(res.tempFilePaths[0], 'images/', res.tempFilePaths[0], (src => {
						queryform.value[name] = src
					}), (err => {

					}), (res => {

					}))
				} else {
					res.tempFilePaths.forEach(el => {
						uploadFile(el, 'images/', el, (src => {
							queryform.value[name].push(src)
						}), (err => {

						}), (res => {

						}))
					})
				}
			}
		})
	}
	const handDel = (index, name) => {
		queryform.value[name].splice(index, 1)
	}

	/**
	 * 	发布协议
	 * */
	const checkboxValue = ref([])
	const handCheck = () => {
		if (checkboxValue.value.length === 1) {
			checkboxValue.value = []
		} else {
			checkboxValue.value = ['ok']
		}
	}
	const handXy = () => {
		uni.navigateTo({
			url: `/pagesA/other/rich?val=fbxy`
		})
	}

	onLoad(async (e) => {
		if (e?.id) {
			const data = await doDetail(e.id)
			if (data.platform) {
				data.platform = JSON.parse(data.platform)
			} else {
				data.platform = []
			}
			if (data.schemes) {
				data.schemes = JSON.parse(data.schemes)
			} else {
				data.schemes = []
			}
			if (data.strength) {
				data.strength = JSON.parse(data.strength)
			} else {
				data.strength = {
					advantage: '',
					compliance: '',
					activity: '',
					registration: ''
				}
			}
			if (!data.detailsImg) {
				data.detailsImg = []
			}
			checkboxValue.value = ['ok']
			isCan.value = true
			queryform.value = data
		}
	})
</script>

<style lang="scss" scoped>
	.add-car-page {
		min-height: 100vh;
		background: #F5F5F5;
		padding: 24rpx;
		padding-bottom: 80rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);

		.form {
			background-color: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			border-radius: 16rpx;

			&:not(:first-child) {
				margin-top: 24rpx;
			}

			&-item {
				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.label {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;

					.tips {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.zdy-input {
					margin-top: 24rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
				}

				.uplaods {
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;

					.upload {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;

						image {
							width: 152rpx;
							height: 152rpx;
						}

						.del {
							position: absolute;
							right: 0;
							top: 0;
							background-color: rgba(0, 0, 0, 0.3);
							color: orangered;
							padding: 5rpx 10rpx;
							border-radius: 0 0 0 20rpx;
						}
					}
				}

				.textarea {
					margin-top: 32rpx;
				}

				.enum {
					.cell {
						margin-top: 48rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						.more {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;

							.to-add {
								color: #F57B01;
							}
						}
					}
				}


				.btns {
					margin-top: 32rpx;
					display: flex;
					align-items: center;

					.cu-btn {
						width: 312rpx;
						height: 88rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						border: 1rpx solid #F5F5F5;

						&:last-child {
							margin-left: 62rpx;
						}

						&-active {
							background: #FFF7E4;
							border-color: #FF930D;
							color: #FF930D;
						}
					}
				}
			}

			.select {
				display: flex;
				align-items: center;
				box-sizing: border-box;

				&-val {
					flex: 1;
					margin-left: 24rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.place {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.to-setting {
						margin-left: 6rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #F57B01;
					}
				}

				.input {
					flex: 1;
					margin-left: 24rpx;
					text-align: right;
				}
			}

			.fangans {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				gap: 24rpx;

				.fangan {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					padding: 8rpx 30rpx;
					background: #FFC434;
					border-radius: 10rpx;
					position: relative;

					.icon {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						width: 24rpx;
						height: 24rpx;
						background: #000000;
						border-radius: 50%;
						display: flex;
						align-items: center;
						color: #fff;
					}
				}
			}

		}

		.check {
			margin-top: 48rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			display: flex;
			align-items: center;

			text {
				color: #999999;

				&:last-child {
					color: #2F6DF4;
				}
			}
		}

		.submit {
			margin-top: 40rpx;

			.cu-btn {
				width: 686rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>